<template>
	<el-dialog title="订单审核" v-model="isShowDialog" width="800px" :close-on-click-modal="false"
		:close-on-press-escape="false">
		<el-form :model="formData" ref="vFormRef" :rules="rules" label-position="left" label-width="80px" size="default"
			@submit.prevent>
			<el-form-item label="订单审核" prop="audit" class="required label-center-align">
				<el-radio-group v-model="formData.audit">
					<el-radio v-for="(item, index) in auditOptions" :key="index" :label="item.value"
						:disabled="item.disabled" style="{display: block}">{{item.label}}</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="拒绝说明" prop="refuse" class="label-center-align">
				<el-input type="textarea" v-model="formData.refuse" :disabled="formData.audit=='pass' || formData.audit==''" placeholder="在此输入拒绝理由" rows="3"></el-input>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="submitForm" style="margin-right:10px;">提 交</el-button>
			</span>
			<span class="dialog-footer">
				<el-button @click="closeDialog">关 闭</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts">
	import {
		ref,
		toRefs,
		reactive
	} from 'vue'

	import {ElMessage} from 'element-plus'

	export default {
		name: 'AuditDialog',
		setup() {
			const vFormRef = ref(null);
			const state = reactive({
				isShowDialog: false,
				formData: {
					audit: "",
					refuse: "",
				},
				rules: {
					audit: [{
						required: true,
						message: '字段值不可为空',
					}],
				},
				auditOptions: [{
					"label": "通过",
					"value": "pass"
				}, {
					"label": "不通过",
					"value": "refuse"
				}],
			});

			  const submitForm = () => {
				 vFormRef.value.validate(valid => {
				  if (valid) {
					  if(state.formData.audit=='pass') {
						  state.formData.refuse=''
					  }
					  console.log(state.formData)
				  }
				})
			  };

			// 打开弹窗
			const openDialog = () => {
				state.isShowDialog = true;
			};
			// 关闭弹窗
			const closeDialog = () => {
				state.isShowDialog = false;
			};

			return {
				openDialog,
				closeDialog,
				submitForm,
				vFormRef,
				...toRefs(state),
			};
		}
	}
</script>
